import { useCallback } from "react"
import AuthBox from "./AuthBox"
import { gql, useMutation } from "@apollo/client"
import { gqlError } from "@/libs/apollo-error"
import { setCookie } from "@/libs/cookie"


const LoginMutation = gql`
    mutation login(
        $account:String!,
        $password:String!
    ){
        auth(
            account:$account,
            password:$password
        ){
            token,

        }
    }
`
const AuthPage = () => {
    const [login, { loading }] = useMutation(LoginMutation, {
        onCompleted({ auth: { token } }, clientOptions) {
            setCookie("token", token);
            // window.location.reload()
            window.location.href = "/"
        },
        onError(error) {
            gqlError(error);
        },
    })
    const onSubmit = useCallback((variables: any) => {
        login({ variables })
    }, [])
    return (
        <div className="mb-32 pl-5 pr-5">
            <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
                <div className="sm:mx-auto sm:w-full sm:max-w-sm">
                    <img
                        className="mx-auto h-10 w-auto rounded"
                        src="/logo.png"
                        alt="Your Company"
                    />
                    <h2 className="mt-6 text-center text-2xl font-bold leading-9 tracking-tight">
                        送餐管理系统
                    </h2>
                </div>
            </div>
            <div className="sm:mx-auto sm:w-full sm:max-w-sm">
                <AuthBox
                    onSubmit={onSubmit}
                    loading={loading}
                />
            </div>
        </div>
    )
}
export default AuthPage